<template>
	<div>
		<div class="searchForm">
		    <div class="flex">
		        用户手机号： 
				<selectUser @callEnter="search" ref="selectUser" @getUserId="getUserId"  />
			</div>
			<div class="flex">
			    状态： 
				<el-select v-model="search_form.status" 
					size="mini"
					placeholder="请选择">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			</div>
			<div class="flex">
			    下单日期： 
				<el-date-picker
				      v-model="time"
					  size="mini"
					  value-format="yyyy-MM-dd"
				      type="daterange"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				</el-date-picker>
			</div>
			<div>
			    <el-button type="primary" size="mini" @click="search">检索</el-button>
			    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
			</div>
		</div>
		<br>
		<el-table  :data="list"
			 border  
			 style="width: 100%"
			>
			<!-- <el-table-column  label="操作"   align="center">
			        <template slot-scope="scope">
			 					<span  
			 						v-if="scope.row.status==4"
			 						>
			 						--
			 					</span>
			 					<span  class="button_text"
			 						@click="showGoods(scope.row)"
			 						v-if="scope.row.status==2"
			 						>
			 						确认收货
			 					</span>
			 					<span  class="button_text"
			 						@click="pay(scope.row)"
			 						v-if="scope.row.status==3"
			 						>
			 						结算
			 					</span>
			 					
			        </template>
			</el-table-column> -->
			<el-table-column   align="center"  prop="id"  label="ID"></el-table-column>
			<el-table-column  label="状态"   align="center">
			     <template slot-scope="scope">
			        <div>
						<div v-if="scope.row.status==1">
							待履约
						</div>
						<div v-if="scope.row.status==2 || scope.row.status==3">
							进行中
						</div>
						<div v-if="scope.row.status==4">
							已完成
						</div>
					</div>
			     </template>
			 </el-table-column>
			<el-table-column   align="center" width="150"   prop="order_sn"    label="订单编号"></el-table-column>
			<el-table-column  label="下单人信息" width="120" align="center">
				<template slot-scope="scope">
				   <div v-if="scope.row.user_info">
						{{scope.row.user_info.name}} <br>
						{{scope.row.user_info.phone}}
					</div>
				</template>
			</el-table-column>
			<el-table-column   align="center"    prop="pre_price"    label="预计单价"></el-table-column>
			<el-table-column   align="center"    prop="pre_weight"    label="报单克重"></el-table-column>
			<el-table-column   align="center"    prop="pre_money"    label="物品估值"></el-table-column>
			<el-table-column   align="center"    prop="goods_name"    label="商品名称"></el-table-column>
			<el-table-column   align="center"    prop="show_weight"    label="实收重量"></el-table-column>
			<el-table-column   align="center" width="130"   prop="pay_money"    label="实际结算金额"></el-table-column>
			<!-- <el-table-column   align="center"  width="150"  prop="add_time"    label="下单时间"></el-table-column> -->
			<el-table-column   align="center"  width="150"  prop="pay_time"    label="结算时间"></el-table-column>
			<el-table-column   align="center"  width="150"  prop="delivery_company"    label="物流公司">
				<template slot-scope="scope">
				   <div>
						{{scope.row.delivery_company || '跑腿'}}
					</div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  width="150"  prop="delivery_number"    label="物流单号"></el-table-column>
			<el-table-column   align="center"  width="150"  prop="run_info"    label="跑腿信息"></el-table-column>
			<el-table-column   align="center"  width="150"  prop="send_time"  label="发货时间"></el-table-column>
			<el-table-column   align="center"  width="150"  prop="desc"  label="用户备注"></el-table-column>
			
		</el-table>
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
		
		<el-dialog
		        title="确认收货"
				:close-on-click-modal="false"
		        :visible.sync="showGoodsForm"
		        width="1000px"
		>
		  <div>
			  <el-form ref="form" :model="rowData" label-width="80px">
				  <el-form-item label="收货日期">
					  <el-date-picker
					        size="mini"
					        v-model="rowData.buyer_time"
					  	    value-format="yyyy-MM-dd HH:mm:ss"
					        type="datetime"
					        placeholder="选择日期时间">
					  </el-date-picker>
				  </el-form-item>
				  <el-form-item label="报单克重">
				      <el-input  v-model="rowData.pre_weight"
								disabled
								size="small"></el-input>
				  </el-form-item>
				  <el-form-item label="实收重量">
				      <el-input  v-model="rowData.show_weight" size="small"></el-input>
				  </el-form-item>
				  <el-form-item label="">
				      <el-button type="primary" @click="showGoodsConfirm" size="small">确定</el-button>
				  </el-form-item>
			  </el-form>
		  </div>
		</el-dialog>
		
		<el-dialog
		        title="确认结算"
				:close-on-click-modal="false"
		        :visible.sync="showPayForm"
		        width="1000px"
		>
		  <div>
			  <el-form ref="form" :model="rowData" label-width="100px">
				  <el-form-item label="结算日期">
					  <el-date-picker
					        size="mini"
					        v-model="rowData.pay_time"
					  	    value-format="yyyy-MM-dd HH:mm:ss"
					        type="datetime"
					        placeholder="选择日期时间">
					  </el-date-picker>
				  </el-form-item>
				  <el-form-item label="实收克重">
				      <el-input disabled  v-model="rowData.show_weight" size="small"></el-input>
				  </el-form-item>
				  <el-form-item  label="物品估值" align="center">
				  	   <div>
							<el-input
								disabled
								:value="rowData.pre_weight*rowData.pre_price" size="small"></el-input>
						</div>
				  </el-form-item>
				  <el-form-item label="实际结算金额">
				      <el-input  v-model="rowData.pay_money" size="small"></el-input>
				  </el-form-item>
				  <el-form-item label="">
				      <el-button type="primary" @click="showPayConfirm" size="small">确定</el-button>
				  </el-form-item>
			  </el-form>
		  </div>
		</el-dialog>
		
	</div>
</template>

<script>
	import selectUser from '@/components/selectUser'
	export default {
		components:{
			selectUser
		},
		data(){
			return {
				page:1,
				pageSize:10,
				page_totle:0,
				search_form:{
					mid:'',
					status:'-1',
					start_time:'',
					end_time:''
				},
				options:[
					{
						value: '-1',
						label: '全部'
					},
					{
						value: '1',
						label: '待履约'
					},
					{
						value: '2',
						label: '进行中'
					},
					{
						value: '3',
						label: '已完成'
					}
				],
				time:[],
				showGoodsForm:false,
				showPayForm:false,
				rowData:{
					
				}
			}
		},
		mounted() {
			this.lodeList()
		},
		methods:{
			showPayConfirm(){
				let params = {
					id:this.rowData.id,
					pay_time:this.rowData.pay_time,
					pay_money:this.rowData.pay_money,
					order_sn:this.rowData.order_sn,
					mid:this.rowData.mid
				}
				this.$post('/orderDetail/showPayConfirm',params,res=>{
					this.showPayForm = false
					this.lodeList()
				})
			},
			// 结算
			pay(row){
				this.rowData = row
				this.rowData.pay_time = this.$utils.formatNowDate(1)
				this.showPayForm = true
			},
			//确定收货
			showGoodsConfirm(){
				let params = {
					id:this.rowData.id,
					buyer_time:this.rowData.buyer_time,
					show_weight:this.rowData.show_weight,
				}
				this.$post('/orderDetail/showGoodsConfirm',params,res=>{
					this.showGoodsForm = false
					this.lodeList()
				})
			},
			// 收货
			showGoods(row){
				this.rowData = row
				this.rowData.buyer_time = this.$utils.formatNowDate(1)
				this.showGoodsForm = true
			},
			clearSearch(){
				this.search_form = {
					mid:'',
					status:'-1',
					start_time:'',
					end_time:''
				}
				this.time= []
				this.page = 1
				this.search()
			},
			getUserId(val){
				this.page = 1
				this.search_form.mid = val
				this.search()
			},
			lodeList(){
				this.search_form.ttype = 1
				let params = {
					page:this.page,
					pageSize:this.pageSize,
					search_form:this.search_form,
					mid:''
				}
				this.$post('/orderDetail/getSellOrderListBuyer',params,res=>{
					let result = res.data
					
					this.list = result.data.result
					this.page_totle = result.data.count
				})
			},
		}
	}
</script>

<style>
</style>